<template>
    <div style="padding:20px;">
        <el-table :data="anchors">
            <el-table-column fixed prop="video.id" label="房间号" width="150">
            </el-table-column>
            <el-table-column prop="video.liveTitle" label="房间名" width="120">
            </el-table-column>
            <el-table-column prop="user.name" label="主播名" width="120">
            </el-table-column>
            <el-table-column prop="user.phone" label="手机" width="120">
            </el-table-column>
            <el-table-column prop="video.liveStatus" label="直播状态" width="100">
                <template slot-scope="scope">
                            <el-tag
                            :type="scope.row.video.liveStatus == 0 ? 'primary' : 'success'"
                            close-transition>{{scope.row.video.liveStatus ? "直播中" : "未直播"}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="editAnchor(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="stopVideo(scope.$index, scope.row)">停止直播</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="removeAnchor(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
            title="编辑用户"
            :visible.sync="editVisible"
            width="30%"
            center>
            <anchor-edit @submit="submitEdit" @close="editVisible = false" :anchor="anchor"></anchor-edit>
        </el-dialog>
    </div>
</template>

<script>
import anchorEdit from './components/anchorEdit';

export default {
    name: 'allAnchor',
    components: { anchorEdit },
    data() {
        return {
            anchors: [],
            pageInfo: {},
            editVisible: false,
            anchor: {} //待编辑的用户
        };
    },
    methods: {
        queryAll(tag) {
            let params = {
                pageNum: 1,
                pageSize: 20
            };
            if (tag) {
                params.status = tag;
            }
            this.$ajax
                .get('/video/allAnchor', {
                    params
                })
                .then(res => {
                    const { list, pageNum, pageSize, pages, total } = res.data;
                    this.anchors = list;
                    this.pageInfo = {
                        pageNum,
                        pageSize,
                        pages,
                        total
                    };
                });
        },
        stopVideo(index, rows) {
            if (!rows.video.liveStatus) {
                return;
            }
            this.$ajax
                .post('/video/live/close', {
                    id: rows.video.id
                })
                .then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '停止成功',
                            type: 'success'
                        });
                        this.$nextTick(() => {
                            this.queryAll();
                        });
                    } else {
                        this.$message.error('停止直播失败!');
                    }
                });
        },
        editAnchor(index, rows) {
            this.editVisible = true;
            this.anchor = rows;
        },
        submitEdit() {
            this.editVisible = false;
            this.$nextTick(() => {
                this.queryAll();
            });
        },
        removeAnchor(index, rows) {
            this.$confirm('此操作将永久删除该主播, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$loading = true;
                    this.$ajax
                        .post('/video/admin/remove', {
                            id: rows.video.id
                        })
                        .then(res => {
                            this.$loading = false;
                            if (res.code === 1) {
                                this.$message({
                                    message: '此主播已成功删除',
                                    type: 'success'
                                });
                                this.$nextTick(() => {
                                    this.queryAll();
                                });
                            } else {
                                this.$message.error('删除主播失败!');
                            }
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        }
    },
    mounted() {
        this.queryAll();
    }
};
</script>

